<template>
  <a-layout-sider width="200" style="background: #fff">
<!--    :openKeys="['batch' , 'base']"-->
    <a-menu
        v-model:selectedKeys="selectKeys"
        mode="inline"
        :style="{ height: '100%', borderRight: 0 }"
    >

        <a-menu-item key="/welcome">
          <router-link to="/welcome">
            <coffee-outlinked/> &nbsp; 欢迎
          </router-link>
        </a-menu-item>

      <a-sub-menu key="batch">
        <template #title>
          <span>
            <UnorderedListOutlined />
            跑批管理
          </span>
        </template>
        <a-menu-item key="/batch/job">
          <router-link to="/batch/job">
            <coffee-outlinked/> &nbsp; 任务管理
          </router-link>
        </a-menu-item>
      </a-sub-menu>
<!--      会员管理-->
      <a-sub-menu key="member">
        <template #title>
          <span>
            <UnorderedListOutlined />
            会员管理
          </span>
        </template>
        <a-menu-item key="/member/ticket">
          <router-link to="/member/ticket">
            <coffee-outlinked/> &nbsp; 会员信息
          </router-link>
        </a-menu-item>

      </a-sub-menu>
<!--每日数据-->
      <a-sub-menu key="business">
        <template #title>
          <span>
            <UnorderedListOutlined />
            业务管理
          </span>
        </template>
        <a-menu-item key="/business/confirm-order">
          <router-link to="/business/confirm-order">
            <coffee-outlinked/> &nbsp; 订单信息
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-ticket">
          <router-link to="/business/daily-train-ticket">
            <coffee-outlinked/> &nbsp; 余票查询
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train">
          <router-link to="/business/daily-train">
            <coffee-outlinked/> &nbsp; 每日火车
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-station">
          <router-link to="/business/daily-train-station">
            <coffee-outlinked/> &nbsp; 每日车站
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-carriage">
          <router-link to="/business/daily-train-carriage">
            <coffee-outlinked/> &nbsp; 每日车厢
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/daily-train-seat">
          <router-link to="/business/daily-train-seat">
            <coffee-outlinked/> &nbsp; 每日座位
          </router-link>
        </a-menu-item>
      </a-sub-menu>


      <a-sub-menu key="base">
        <template #title>
          <span>
            <UnorderedListOutlined />
            基础管理
          </span>
        </template>
        <a-menu-item key="/base/station">
          <router-link to="/base/station">
            <coffee-outlinked/> &nbsp; 车站管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train">
          <router-link to="/base/train">
            <coffee-outlinked/> &nbsp; 火车管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train-station">
          <router-link to="/base/train-station">
            <coffee-outlinked/> &nbsp; 到站管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train-carriage">
          <router-link to="/base/train-carriage">
            <coffee-outlinked/> &nbsp; 车厢管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train-seat">
          <router-link to="/base/train-seat">
            <coffee-outlinked/> &nbsp; 座位管理
          </router-link>
        </a-menu-item>
      </a-sub-menu>

    </a-menu>
  </a-layout-sider>
</template>
<script>
import {defineComponent, ref, watch} from 'vue';
import router from "@/router";
export default defineComponent({
  name: "the-sider-view",

  setup() {
    const selectKeys = ref([]);

    watch(() => router.currentRoute.value.path, (newValue) => {
      console.log('watch',newValue);
      selectKeys.value=[];
      selectKeys.value.push(newValue);
    },{immediate: true});

    return{
      selectKeys
    }
  },
});
</script>
<style>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>